layui.use(['form', 'layer','jquery'], function(){
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.$;


    // 初始化表单
    form.render();

    // 命令类型变化时显示/隐藏流式配置
    form.on('select(commandTypeSelect)', function(data){
        var value = data.value;
        if (value === 'streaming') {
            $('#streaming-config').removeClass('hidden');
        } else {
            $('#streaming-config').addClass('hidden');
        }
    })


    // 添加主机
    $('#add-host').on('click', function(){
        console.log("添加主机")
        var item = $('<div class="array-item">' +
            '<input type="text" name="hosts[]" placeholder="请输入主机名称" class="layui-input">' +
            '<button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>' +
        '</div>');
        $('#hosts-container').append(item);
        initRemoveButtons();
    });

    // 添加期望输出
    $('#add-expected').on('click', function(){
        var item = $(`
            <div class="expected-block">
                <div class="layui-form-item">
                    <label class="layui-form-label">匹配模式</label>
                    <div class="layui-input-block">
                        <input type="text" name="expected_pattern[]" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">是否使用正则表达式</label>
                        <div class="layui-inline">
                            <input type="checkbox" name="expected_use_regex[]" class="layui-input" lay-skin="switch" lay-text="是|否" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" >匹配次数</label>
                        <div class="layui-inline">
                            <input type="number" name="expected_match_times[]" class="layui-input" value="1">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                    </div>
                </div>
            </div>    
        `);
        $('#expected-container').append(item);
        initRemoveExpectedButtons();
        form.render();
    });

    // 添加不期望输出
    $('#add-unexpected').on('click', function(){
        var item = $(`
            <div class="unexpected-block">
                <div class="layui-form-item">
                    <label class="layui-form-label">匹配模式</label>
                    <div class="layui-input-block">
                        <input type="text" name="unexpected_pattern[]" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">是否使用正则表达式</label>
                        <div class="layui-inline">
                            <input type="checkbox" name="unexpected_use_regex[]" class="layui-input" lay-skin="switch" lay-text="是|否" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" >匹配次数</label>
                        <div class="layui-inline">
                            <input type="number" name="unexpected_match_times[]" class="layui-input" value="0">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                    </div>
                </div>
            </div>
        `);
        $('#unexpected-container').append(item);
        initRemoveUnexpectedButtons();
        form.render();
    });

    // 添加依赖任务
    $('#add-depends').on('click', function(){
        var item = $('<div class="array-item">' +
            '<input type="text" name="depends_on[]" placeholder="请输入依赖任务名称" class="layui-input">' +
            '<button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>' +
        '</div>');
        $('#depends-container').append(item);
        initRemoveButtons();
    });

    // 添加交互响应
    $('#add-interactive').on('click', function(){
        var block = $('<div class="interactive-block">' +
            '<div class="layui-form-item">' +
                '<label class="layui-form-label">提示词</label>' +
                '<div class="layui-input-block">' +
                    '<input type="text" name="interactive_prompt[]" placeholder="例如: Password:" class="layui-input">' +
                '</div>' +
            '</div>' +
            '<div class="layui-form-item">' +
                '<label class="layui-form-label">响应内容</label>' +
                '<div class="layui-input-block">' +
                    '<input type="text" name="interactive_response[]" placeholder="例如: root" class="layui-input">' +
                '</div>' +
            '</div>' +
            '<div class="layui-form-item">' +
                '<label class="layui-form-label">响应次数</label>' +
                '<div class="layui-input-block">' +
                    '<input type="number" name="interactive_times[]" placeholder="例如: 1" class="layui-input" value="1">' +
                '</div>' +
            '</div>' +
            '<div class="layui-form-item">' +
                '<div class="layui-input-block">' +
                    '<button type="button" class="layui-btn layui-btn-danger remove-interactive"><i class="layui-icon layui-icon-delete"></i> 删除此响应</button>' +
                '</div>' +
            '</div>' +
        '</div>');
        $('#interactive-container').append(block);
        initRemoveInteractiveButtons();
    });

    // 初始化删除按钮事件
    function initRemoveButtons() {
        $('.remove-item').off('click').on('click', function(){
            $(this).closest('.array-item').remove();
        });
    }
    // 初始化期望输出删除按钮
    function initRemoveExpectedButtons() {
        $('.remove-item').off('click').on('click', function(){
            $(this).closest('.expected-block').remove();
        });
    }
    // 初始化不期望输出删除按钮
    function initRemoveUnexpectedButtons() {
        $('.remove-item').off('click').on('click', function(){
            $(this).closest('.unexpected-block').remove();
        });
    }

    // 初始化交互响应删除按钮
    function initRemoveInteractiveButtons() {
        $('.remove-interactive').off('click').on('click', function(){
            $(this).closest('.interactive-block').remove();
        });
    }

    // 初始化按钮事件
    initRemoveButtons();
    initRemoveInteractiveButtons();

    // 提交表单
    // $('#submit-btn').on('click', function(){
    //     // 验证必填字段
    //     var name = $('input[name="name"]').val();
    //     var command = $('textarea[name="command"]').val();
        
    //     if(!name || !command) {
    //         layer.msg('任务名称和执行命令是必填项！', {icon: 2});
    //         return;
    //     }
        
    //     // 收集表单数据
    //     var formData = {
    //         name: name,
    //         command: command,
    //         mode: $('select[name="mode"]').val(),
    //         timeout: $('input[name="timeout"]').val(),
    //         command_type: $('select[name="command_type"]').val(),
    //         allow_failure: $('input[name="allow_failure"]').is(':checked'),
    //         hosts: [],
    //         expected: [],
    //         unexpected: [],
    //         depends_on: [],
    //         interactive_response: []
    //     };
        
    //     // 收集数组字段
    //     $('input[name="hosts[]"]').each(function(){ 
    //         if($(this).val()) formData.hosts.push($(this).val()); 
    //     });
    //     $('input[name="expected[]"]').each(function(){ 
    //         if($(this).val()) formData.expected.push($(this).val()); 
    //     });
    //     $('input[name="unexpected[]"]').each(function(){ 
    //         if($(this).val()) formData.unexpected.push($(this).val()); 
    //     });
    //     $('input[name="depends_on[]"]').each(function(){ 
    //         if($(this).val()) formData.depends_on.push($(this).val()); 
    //     });
        
    //     // 收集交互响应
    //     $('.interactive-block').each(function(){
    //         var prompt = $(this).find('input[name="interactive_prompt[]"]').val();
    //         var response = $(this).find('input[name="interactive_response[]"]').val();
    //         var times = $(this).find('input[name="interactive_times[]"]').val();
            
    //         if(prompt && response) {
    //             formData.interactive_response.push({
    //                 prompt: prompt,
    //                 response: response,
    //                 reply_times: times || 1
    //             });
    //         }
    //     });
        
    //     // 如果命令类型为streaming，收集流式配置
    //     if(formData.command_type === 'streaming') {
    //         formData.streaming_config = {
    //             max_duration: $('input[name="max_duration"]').val(),
    //             line_timeout: $('input[name="line_timeout"]').val(),
    //             show_realtime: $('input[name="show_realtime"]').is(':checked'),
    //             write_to_file: $('input[name="write_to_file"]').is(':checked'),
    //             shell_inherit_task: $('input[name="shell_inherit_task"]').val(),
    //             shell_destroy: $('input[name="shell_destroy"]').is(':checked')
    //         };
    //     }
        
    //     // 显示收集的数据
    //     layer.alert('<pre>' + JSON.stringify(formData, null, 2) + '</pre>', {
    //         title: '表单数据',
    //         area: ['800px', '900px'],
    //         btn: ['确定', '取消'],
    //         yes: function(index){
    //             layer.close(index);
    //             layer.msg('配置提交成功！', {icon: 1});
    //         }
    //     });
    // });

    // 重置表单
    // $('#reset-btn').on('click', function(){
    //     layer.confirm('确定要重置表单吗？', {icon: 3, title:'重置确认'}, function(index){
    //         // 重置表单
    //         $('input[type="text"], input[type="number"], textarea').val('');
    //         $('select').val('');
            
    //         // 重置为初始值
    //         $('input[name="name"]').val('monitor_real_time_logs');
    //         $('textarea[name="command"]').val('timeout 60 tail -f /var/log/syslog');
    //         $('select[name="mode"]').val('parallel');
    //         $('input[name="timeout"]').val('10');
    //         $('select[name="command_type"]').val('streaming');
            
    //         // 重置数组字段
    //         $('#hosts-container').html(
    //             '<div class="array-item">' +
    //                 '<input type="text" name="hosts[]" placeholder="请输入主机名称" class="layui-input" value="web-server-01">' +
    //                 '<button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>' +
    //             '</div>' +
    //             '<div class="array-item">' +
    //                 '<input type="text" name="hosts[]" placeholder="请输入主机名称" class="layui-input" value="api-server-01">' +
    //                 '<button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>' +
    //             '</div>'
    //         );
            
    //         $('#expected-container').html(
    //             '<div class="array-item">' +
    //                 '<input type="text" name="expected[]" placeholder="请输入期望输出" class="layui-input" value="active (running)">' +
    //                 '<button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>' +
    //             '</div>'
    //         );
            
    //         $('#unexpected-container').html(
    //             '<div class="array-item">' +
    //                 '<input type="text" name="unexpected[]" placeholder="请输入不期望输出" class="layui-input" value="failed">' +
    //                 '<button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>' +
    //             '</div>'
    //         );
            
    //         $('#depends-container').html(
    //             '<div class="array-item">' +
    //                 '<input type="text" name="depends_on[]" placeholder="请输入依赖任务名称" class="layui-input" value="restart_nginx_service">' +
    //                 '<button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>' +
    //             '</div>'
    //         );
            
    //         $('#interactive-container').html(
    //             '<div class="interactive-block">' +
    //                 '<div class="layui-form-item">' +
    //                     '<label class="layui-form-label">提示词</label>' +
    //                     '<div class="layui-input-block">' +
    //                         '<input type="text" name="interactive_prompt[]" placeholder="例如: Password:" class="layui-input" value="Password:">' +
    //                     '</div>' +
    //                 '</div>' +
    //                 '<div class="layui-form-item">' +
    //                     '<label class="layui-form-label">响应内容</label>' +
    //                     '<div class="layui-input-block">' +
    //                         '<input type="text" name="interactive_response[]" placeholder="例如: root" class="layui-input" value="root">' +
    //                     '</div>' +
    //                 '</div>' +
    //                 '<div class="layui-form-item">' +
    //                     '<label class="layui-form-label">响应次数</label>' +
    //                     '<div class="layui-input-block">' +
    //                         '<input type="number" name="interactive_times[]" placeholder="例如: 1" class="layui-input" value="1">' +
    //                     '</div>' +
    //                 '</div>' +
    //                 '<div class="layui-form-item">' +
    //                     '<div class="layui-input-block">' +
    //                         '<button type="button" class="layui-btn layui-btn-danger remove-interactive"><i class="layui-icon layui-icon-delete"></i> 删除此响应</button>' +
    //                     '</div>' +
    //                 '</div>' +
    //             '</div>'
    //         );
            
    //         // 重置开关状态
    //         $('input[name="allow_failure"]').prop('checked', true);
    //         $('input[name="show_realtime"]').prop('checked', true);
    //         $('input[name="write_to_file"]').prop('checked', true);
    //         $('input[name="shell_destroy"]').prop('checked', false);
            
    //         // 重新初始化删除按钮
    //         initRemoveButtons();
    //         initRemoveInteractiveButtons();
            
    //         // 重新渲染表单
    //         form.render();
            
    //         layer.close(index);
    //         layer.msg('表单已重置', {icon: 1});
    //     });
    // });
});